<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-12-12 15:06:56
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-10 17:42:13
-->
<!--
 * @Descripttion: 商品详情
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-10 17:35:03
 -->
<template>
  <div class="app-container">
    <div class="clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <el-form
          class="form-no-bottom"
          :inline="true"
          :model="dataObj"
          label-position="left"
          label-width="80px"
        >
          <el-form-item label="规格名：">
            <el-input v-model.trim="dataObj.specsName" />
          </el-form-item>
          <el-button type="primary" @click="btnAddData">新增规格</el-button>
          <el-button type="default" @click="btnCancle">取 消</el-button>
          <!-- <el-button type="primary" @click="btngetData">获取值</el-button> -->
        </el-form>
      </el-card>
    </div>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="tableData.specs"
      :loading="loading"
      @edit-closed="onEditClosed"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { column2emptyObj } from '@/libs/util.js'
import SpValue from './sp-values'
import { saveData, listData, delData } from '@/api/bsd/specs.js'
import { getDelButton } from '@/components/Table/oper-btns.js'
import XEUtils from 'xe-utils'

export default {
  name: 'SpecsList',
  components: { },
  mixins: [oftenuse],
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      columnsData: [
        { title: '操作', width: 60,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'name', title: '规格名', editRender: { name: 'ElInput' }, width: 150 },
        { field: 'data', title: '规格值',
          slots: {
            default: (params) => {
              const { row } = params
              const data = {
                props: { pId: row.id },
                model: {
                  value: XEUtils.get(row, 'children'),
                  callback(value) {
                    XEUtils.set(row, 'children', value)
                  }
                }
              }
              return [
                <SpValue {...data}/>
              ]
            }
          }
        }
      ]
    }
  },
  watch: {
  },
  created() {
    this.setTableData('specs', [])
    this.initData()
  },
  destroyed() {
  },
  mounted() {
  },
  methods: {
    btngetData() {
      const data = this.getVxeTableData()
      console.log(data)
    },
    btnCancle() {
      this.setTableData('specs', [])
      this.getSpecsData()
    },
    btnAddData() {
      const specsName = this.dataObj.specsName
      if (!specsName || specsName === '') {
        return this.$message.error('请输入规格名')
      }
      const params = {
        name: specsName
      }
      this.saveData(params).then(data => {
        const tableData = this.getTableData('specs')
        const colsObj = column2emptyObj(this.columnsData)
        const obj = Object.assign(colsObj, data)
        tableData.push(obj)
      })
    },
    btnDelData(row) {
      this.$confirm('确定要删除该规格吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delData(row)
      }).catch(() => {
      })
    },
    // api
    initData() {
      this.getSpecsData()
    },
    saveData(params) {
      return new Promise((resolve, reject) => {
        saveData(params).then(res => {
          if (res.data.flag) {
            resolve(res.data.data)
            this.$notify.success({ title: '保存成功！' })
          } else {
            this.$notify.error({ title: '保存失败！', message: res.data.message || '' })
          }
        })
      })
    },
    delData(row) {
      const { id } = row
      delData(id).then(res => {
        if (res.data.flag) {
          // this.$refs.table.remove([row])
          const data = this.tableData.specs
          for (let i = 0; i < data.length; i++) {
            const item = data[i]
            if (item.id === id) {
              data.splice(i, 1)
              i--
            }
          }
          const { title } = res.data
          this.$notify.success({ title })
        }
      })
    },
    getSpecsData() {
      this.loading = true
      listData().then(res => {
        this.loading = false
        if (res.data.flag) {
          const data = res.data.data
          const treeData = XEUtils.toArrayTree(data, {
            key: 'id',
            parentKey: 'pid'
          })
          const tableData = this.getTableData('specs')
          tableData.push(...treeData)
        }
      }).catch(_ => {
        this.loading = false
      })
    },
    getVxeTableData() {
      return this.$refs.table.getTableData().tableData
    },
    onEditClosed(params, val) {
    },
    onSizeChange() {},
    onCurrentChange() {}
  }
}
</script>

<style scoped>
</style>
